<template>
    <!-- Form -->
    <el-dialog title="新增区域" :visible="dialogFormVisible" :before-close="closeFn" width="35%"   >
      <el-form ref="fff" :model="form" :rules="rules">
        <el-form-item label="区域名称" :label-width="formLabelWidth" prop="regionName">
          <el-input v-model="form.regionName" autocomplete="off" maxlength="10" style="width: 80%" placeholder="请输入" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="备注说明" :label-width="formLabelWidth" prop="remark">
          <el-input type="textarea" maxlength="40" v-model="form.remark" style="width: 80%"  placeholder="请输入备注(不超过40字)" :rows="3" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="quxiao">取 消</el-button>
        <el-button type="primary"  @click="Ent">确 定</el-button>
      </div>
    </el-dialog>

</template>

<script>
// import { watch } from 'vue';
export default {
  props:{
    dialogFormVisible: {
      type:Boolean,
      required:true
    },
    specific:{
      type:Object,
      required:true
    },
    specifi:{
      type:Number,
      required:true
    }
  },
  created () {
      if(this.specifi === 0) {
         this.form.regionName = ''
         this.form.remark = ''
      }
    },
  data (){
    return {
      id:0,
      //  dialogFormVisible: true,
        form: {
          regionName: '',
          remark: ''
        },
        rules: {
          regionName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
          remark: [{ required: true, message: '请输入备注说明', trigger: 'blur' }]
      },
        formLabelWidth: '120px'
      };
    },
    methods: {
      Ent(){
        if(this.specifi === 0) {
          this.$emit('Ent',this.form)
        }else {
          this.$emit('revisearea',{...this.form,id:this.id})
        }
        this.$refs.fff.resetFields()
      },
      closeFn() {
        this.$refs.fff.resetFields()
        this.$emit('ishow')
      },
      quxiao(){
        this.$refs.fff.resetFields()
        this.$emit('update:dialogFormVisible',false)
      }
    },
    watch:{
      // 监听
      specific:{
        immediate:true,
        deep:true,
        handler(){
          if (this.specifi === 1) {
            this.form.regionName = this.specific.regionName
            this.form.remark = this.specific.remark
            this.id = this.specific.id
            console.log(this.form);
          }
        }
      }
    },
 }
 
</script>

<style>
</style>
